<template>
  <h3>{{eidtId? '编辑':'新建'}}物品</h3>
  <div class="createClass">
    <el-form
      :inline="true"
      :model="category.categoryMsg"
      class="demo-form-inline"
      @submit="() => false"
    >

      <el-form-item label="物品名称">
        <el-input v-model="category.categoryMsg.name" placeholder="请输入分类名" />
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :heders="useGetToken()"
            :show-file-list="false"
            :on-success="successed"
            :before-upload="beforeUpload"
        >
          <img v-if="category.categoryMsg.img" :src="category.categoryMsg.img" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{eidtId? '更新' : '创建'}}物品</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {computed, onBeforeMount, reactive} from "vue";
import { creatItem,getEditItem,upDateItem } from "@/api/getItem";
import { useRouter,useRoute } from "vue-router";
import { ElMessage } from "element-plus";

import { Plus } from '@element-plus/icons-vue'
import {useGetToken} from "@/hook/useGetToken";
// import type { UploadProps } from 'element-plus'
//分类信息
const category = reactive({
  categoryMsg:{
    name:'',
    img:'',
  },
  imgUrl:''
});

const router = useRouter();
const route = useRoute()

const eidtId = computed(()=>{
  return route.params.id
})
//提交分类信息
const onSubmit = async () => {

  let result
  if (route.params.id) {
    //更新分类数据
    result = await upDateItem(eidtId.value,category.categoryMsg)
  } else {
    //添加分类
    result = await creatItem(category.categoryMsg);
  }


  if (result.status === 200) {
    router.push({
      path: "/home/ItemList",
    });
    //消息提示框
    ElMessage({
      message: "保存成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "保存失败",
      type: "warning",
    });
  }
};

//获取被编辑数据的详情
const getEdit = async () => {
  console.log(1)
  let result = await getEditItem(eidtId.value)

  if (result.status === 200) {
    category.categoryMsg.name = result.data.name
    category.categoryMsg.img = result.data.img
  }
}

//图片上传成功回调
const successed= (res:any)=>{
  //添加到需要提交的对象属性中
  category.categoryMsg.img = res.url
}
//图片上传之前回调钩子
const beforeUpload = () => {

}

onBeforeMount(()=>{

 if (route.params.id) getEdit()
})

</script>

<style lang="less" scoped>
.createClass {
  margin: 20px 20px 0 20px;
}
.avatar-uploader .el-upload {
  border: 1px solid black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: black;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  border: 1px solid black;
  border-radius: 10px;
}
</style>
